import { graphql } from 'gatsby';

import ComponentApi from '../../components/ComponentApi';
import ReactPlayground from '../../components/ReactPlayground';

import ModalStatic from '../../examples/Modal/Static';
import ModalBasic from '../../examples/Modal/Basic';
import ModalStaticBackdrop from '../../examples/Modal/StaticBackdrop';
import ModalDefaultSizing from '../../examples/Modal/DefaultSizing';
import ModalFullScreen from '../../examples/Modal/FullScreen';
import ModalCustomSizing from '../../examples/Modal/CustomSizing';
import ModalVerticallyCentered from '../../examples/Modal/VerticallyCentered';
import ModalWithoutAnimation from '../../examples/Modal/WithoutAnimation';
import ModalGrid from '../../examples/Modal/Grid';
import ModalFocus from '../../examples/Modal/Focus';

import styles from '../../css/examples.module.scss';

# Modals

<p className="lead">
  Add dialogs to your site for lightboxes, user notifications, or completely
  custom content.
</p>

## Overview

- Modals are positioned over everything else in the document and remove
  scroll from the `<body>` so that modal content scrolls instead.
- Modals are <em>unmounted</em> when closed.
- Bootstrap only supports <strong>one</strong> modal window at a time.
  Nested modals aren't supported, but if you really need them, the
  underlying <code>@restart/ui</code> library can support them if you're
  willing.
- Modal's "trap" focus in them, ensuring the keyboard navigation cycles
  through the modal, and not the rest of the page.
- Unlike vanilla Bootstrap, <code>autoFocus</code> works in Modals
  because React handles the implementation.

## Examples

### Static Markup

Below is a <em>static</em> modal dialog (without the positioning) to
demonstrate the look and feel of the Modal.

<ReactPlayground codeText={ModalStatic} />

### Live demo

A modal with header, body, and set of actions in the footer. Use
`<Modal/>` in combination with other components to show or hide your
Modal. The `<Modal/>` Component comes with a few convenient "sub components": `<Modal.Header/>`,
`<Modal.Title/>`, `<Modal.Body/>`, and `<Modal.Footer/>`, which you can use to build the Modal content.

<ReactPlayground codeText={ModalBasic} />

### Static backdrop

When backdrop is set to static, the modal will not close when clicking
outside it. Click the button below to try it.

<ReactPlayground codeText={ModalStaticBackdrop} />

### Without Animation

A Modal can also be without an animation. For that set the `animation`
prop to `false`.

<ReactPlayground codeText={ModalWithoutAnimation} />

<div className="bs-callout bs-callout-info">
  <div className="h4">Additional Import Options</div>
  <p>
    The Modal Header, Title, Body, and Footer components are available as static
    properties the <code>{'<Modal/>'}</code> component, but you can also, import
    them directly like: <code>require("react-bootstrap/ModalHeader")</code>.
  </p>
</div>

### Vertically centered

You can vertically center a modal by passing the `centered` prop.

<ReactPlayground codeText={ModalVerticallyCentered} />

### Using the grid

You can use grid layouts within a model using regular grid components
inside the modal content.

<ReactPlayground codeText={ModalGrid} />

### Focus on specific element

You can focus on an element inside the modal using `autoFocus` attribute on the element.

<ReactPlayground codeText={ModalFocus} />

## Optional Sizes

You can specify a Bootstrap large or small modal by using the
`size` prop.

<ReactPlayground codeText={ModalDefaultSizing} />

### Fullscreen Modal

You can use the `fullscreen` prop to make the modal
fullscreen. Specifying a breakpoint will only set the modal as
fullscreen **below** the breakpoint size.

<ReactPlayground codeText={ModalFullScreen} />

### Sizing modals using custom CSS

You can apply custom css to the modal dialog div using the
`dialogClassName` prop. Example is using a custom css class with width
set to 90%.

<ReactPlayground
  codeText={ModalCustomSizing}
  exampleClassName={styles.modal90w}
/>

## API

<ComponentApi metadata={props.data.Modal} />
<ComponentApi metadata={props.data.ModalDialog} />
<ComponentApi metadata={props.data.ModalHeader} />
<ComponentApi metadata={props.data.ModalTitle} />
<ComponentApi metadata={props.data.ModalBody} />
<ComponentApi metadata={props.data.ModalFooter} />

export const query = graphql`
  query ModalQuery {
    Modal: componentMetadata(displayName: { eq: "Modal" }) {
      ...ComponentApi_metadata
    }
    ModalDialog: componentMetadata(displayName: { eq: "ModalDialog" }) {
      ...ComponentApi_metadata
    }
    ModalHeader: componentMetadata(displayName: { eq: "ModalHeader" }) {
      ...ComponentApi_metadata
    }
    ModalTitle: componentMetadata(displayName: { eq: "ModalTitle" }) {
      ...ComponentApi_metadata
    }
    ModalBody: componentMetadata(displayName: { eq: "ModalBody" }) {
      ...ComponentApi_metadata
    }
    ModalFooter: componentMetadata(displayName: { eq: "ModalFooter" }) {
      ...ComponentApi_metadata
    }
  }
`;
